<template>
	<view class="gy-quick-selection-group">
		<view
			class="gy-quick-selection-item" 
			:class="{selected: props.multiple ? props.modelValue.indexOf(index) !== -1 : props.valueType === 'value' ? props.modelValue === item.value : props.modelValue === index }" 
			v-for="(item,index) in list" 
			:key="index"
			@click.stop="selectFn(item.value, index)">
			<slot name="item" :scope="item">{{ item.label }}</slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
	
	const emits = defineEmits(["select", "update:modelValue"]);
	
	const props = defineProps({
		modelValue: {
			type: [String, Number, Array]
		},
		multiple: {
			type: Boolean,
			default: false
		},
		valueType: {
			type: String,
			default: "value"
		},
	    list: {
	    	type: Array,
			default: () => []
	    }
	});
	
	function selectFn(val: number | string, index: number){
		if(props.multiple){
			let arr = JSON.parse(JSON.stringify(props.modelValue));
			if(arr.indexOf(index) === -1){
				arr.push(index);
			}else{
				arr.splice(arr.indexOf(index), 1);
			}
			emits('update:modelValue', arr);
			emits('select', arr);
		}else{
			if(props.valueType === 'value'){
				emits('update:modelValue', val);
				emits('select', val);
			}else{
				emits('update:modelValue', index);
				emits('select', index);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gy-quick-selection-group{
		margin: var(--gy-gap);
		.gy-quick-selection-item{
		    width: auto;
		    @include flex-center-center;
		    display: inline-flex;
		    height: 60rpx;
		    border-radius: 30rpx;
		    padding: 0 30rpx;
		    color: var(--gy-text-color-primary);
		    background-color: var(--gy-page-bg-color);
		    font-size: var(--gy-font-size-base);
		    margin-right: 20rpx;
		    margin-bottom: 20rpx;
		}
		.gy-quick-selection-item.selected{
		    background-color: var(--gy-color-primary);
		    color: #ffffff;
		}
	}
</style>